<template>
  <div class="home">
    <div v-transfer-dom>
      <actionsheet :menus="menus" @on-click-menu="clickMenu" v-model="showMenu" show-cancel></actionsheet>
    </div>
    <!-- <top class="top"></top> -->
    <!-- <view-box ref="viewBox" body-padding-top="40px" >

      
    </view-box>-->
    <div style="margin-bottom:35px">
      <x-header slot="header" ref="header" style="width:100%;position:fixed;left:0;top:0;z-index:100;" @on-click-more="showExit"
        :left-options="{showBack: true, backText: '返回'}" :right-options="{showMore: showMore}">
        <span>{{title}}</span>
        <span style="float:right">{{userName}}</span>
      </x-header>
    </div>
    <div class="search">
      <x-input class="weui-vcode" placeholder="请输入关键字书名/作者/出版社" v-model="keyWords" show-clear>
        <x-button slot="right" type="primary" mini @click.native="loadBook()">搜索</x-button>
      </x-input>
    </div>
    <div style="height: 65px">
      <bookItem v-for="(item, index) in bookList" :data="item" :key="index"></bookItem>
    </div>
  </div>
</template>

<script>
import {
  Group,
  Cell,
  Blur,
  Grid,
  GridItem,
  GroupTitle,
  Tab,
  TabItem,
  XHeader, Actionsheet, XSwitch, Toast, ViewBox, XInput, XButton
} from "vux";
import formatDate from "../filter/formatDate";
import bookItem from "../components/list/BookItem.vue";
import { mapState } from "vuex";
export default {
  components: {
    Group,
    Cell,
    Blur,
    Grid,
    GridItem,
    GroupTitle,
    Tab,
    TabItem,
    bookItem,
    XHeader,
    Actionsheet, XInput, XButton
  },
  data() {
    return {
      tabIndex: 0,
      haveData: true,
      mine: true,
      woDeal: true,
      assetBind: true,
      keyWords: '',
      bookList: [],
      bCount: 0,
      showMore: false,
      total: "", showMenu: false,
      menus: {
        // ChangePwd: "密码修改",
        SingOut: "注销账号",
        ExitApp: "退出系统",
      },
    };
  },
  methods: {    //点击弹出菜单
    clickMenu(locale) {
      console.log(locale);
      switch (locale) {
        case "ChangePwd":
          break;
        case "SingOut":
          localStorage.removeItem("username");
          localStorage.removeItem("password");
          localStorage.removeItem("autoLogin");
          this.$router.push({ path: "/" });
          break;
        case "ExitApp":
          //wx.closeWindow();
          Android.exitApp();
          break;
        default:
          break;
      }
    },
    //弹出菜单
    showExit() {
      this.showMenu = true;
    },
    onItemClick(index) {
      this.tabIndex = index;
    },
    goZcBd() {
      this.$router.push("qrScan");
    },
    goZcBdGD() {
      this.$router.push("qrEquipment");
    },
    goMyGd() {
      this.$router.push("workOrderList");
    },
    goGdDeal() {
      this.$router.push("workOrderDeal");
    },
    /**
     * 退出
     */
    goBack() {
      this.bCount = this.bCount + 1;
      if (this.bCount >= 2) {
        Android.exitApp();
      } else {
        setTimeout(function () {
          this.bCount = 0;
        }, 2000);
        Android.ShowExit();
      }
    },
    /**
     * 加载图书
     */
    loadBook() {
      let params = {
        current: 1,
        pageSize: 20,
        keyWords: this.keyWords
      };
      this.$http
        .get("/api/book/list", { params })
        .then(res => {
          if (res.data.data.records) {
            this.bookList = res.data.data.records;
            this.bookList.forEach(item => {
              item.publicationDate = formatDate(item.publicationDate, "yyyy-MM-dd");
            })
          }
        })
        .catch(err => {
          console.log("err--" + err);
          this.$state.error();
        });
    }
  },
  computed: {
    ...mapState({
      showBack: (state) => state.showBack,
      title: (state) => state.title,
      userName: (state) => state.userName,
    }),
  },
  mounted() {
    /*将要给原生调用的方法挂载到 window 上面 不能加()*/
    window.callJsFunction = this.callJsFunction;
    console.log(this.$store.state.showBack);
  },
  created() {
    window.goBack = this.goBack;
    this.$store.commit("updateTitle", "图书检索");
    this.$store.commit("updateShowBack", false);
    this.loadBook();
    //showMore
    const token = this.$store.state.token;
    if (token == null || null == '') {
      this.showMore = false;
    } else {
      this.showMore = true;
    }
  },
};
</script>

<style lang="less" scoped>
.vux-header {
  background-color: #1478ee !important;
}
.home {
  height: 100vh;
  padding-top: 20px;
  position: relative;
  padding-bottom: 66px;
  .search {
    background-color: white;
    border-bottom: solid 1px #ccc;
  }
  .vux-header {
    background-color: #1478ee !important;
  }
  .top {
    width: 90%;
    height: 150px;
    position: relative;
    margin-left: 5%;
    background: url("../assets/img/home_img.png") no-repeat center;
    background-size: 100% 100%;
    text-align: center;
    line-height: 150px;
    margin-bottom: 0px;
    .logo {
      vertical-align: middle;
      position: static;
      max-width: 250px;
      height: 100px;
      top: -50%;
      left: -50%;
    }
  }
  .vux-tab .vux-tab-item.vux-tab-selected {
    color: #2f5dbf;
    border-bottom: 3px solid #2f5dbf;
  }
  .industryList {
    width: 90%;
    margin-left: 5%;
    position: relative;
    // padding: 20px 0px;
    // background-color: red;
    .industryView {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-around;
      margin: 15px 0;
      .industryItem {
        text-align: center;
        position: relative;
        .icon {
          width: 45pt;
          height: 45pt;
        }
        .itemTitle {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.8);
          text-align: center;
        }
        .badge {
          height: 18px;
          min-width: 18px;
          border-radius: 12px;
          position: absolute;
          background-color: red;
          color: white;
          font-size: 12px;
          font-weight: bold;
          top: 0px;
          right: 0px;
          padding: 2px;
        }
      }
    }
  }
  .vux-tab .vux-tab-item.vux-tab-selected {
    color: #2f5dbf;
    border-bottom: 3px solid #2f5dbf;
  }
  .vux-tab-ink-bar {
    position: absolute;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #2f5dbf;
    text-align: center;
  }
  :global {
    .at-tab-bar {
      padding: 12rpx 80rpx 6rpx;
      border-bottom: 2px solid rgba(26, 47, 66, 0.1);
      border-top: none;
    }
    .at-tab-bar::after {
      border-top-width: 0;
    }
  }
}
.weui-btn_primary {
  background-color: #1478ee;
}
.weui-btn_primary:hover {
  background-color: #1478ee;
}
.weui-btn_primary:active {
  background-color: #1478ee;
}
.weui-btn_primary {
  background-color: #1478ee;
  &:not(.weui-btn_disabled):visited {
    color: #1478ee;
  }
  &:not(.weui-btn_disabled):active {
    background-color: #1478ee;
  }
}
</style>
